<template>
	<view>
		<view class="title">
			<image @click="fanhui" src="/static/hjt.png" :style="'padding-top:'+top+'px;'" mode=""></image>
			<view class="toptit" :style="'padding-top:'+top+'px;'">
				维保工单
			</view>
			<view class="" style="opacity: 0;">12</view>
		</view>
		<view class="box">
			<view class="box-1">
				<view class="box-1text">
					* <text>维修情况</text>
				</view>
				<textarea name="" placeholder="请输入维修情况描述" v-model="content"></textarea>
			</view>
			<view class="box-1" style="border-bottom: 0rpx">
				<view class="box-1text" style="line-height: 40rpx;">
					* <text>工作后拍照</text>
				</view>
				<view class="box-1img">
					<image :src="item" mode="" v-for="(item,index) in pics" :key="index"></image>

					<image v-if="!pics[0]" @click="scimg" src="../../static/z1.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="botton" @click="shangbao">
			确认上报
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 0,
				id: '',
				pics: [],
				content: ''
			}
		},
		onLoad(e) {
			this.id = e.id
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// this.CustomBar = menuButtonInfo.bottom * 1 + 10
			this.top = menuButtonInfo.top * 1 + 10
		},
		methods: {
			shangbao() {
				this.$post('wuyecenter/enterend', {
					id: this.id,
					pics: this.pics,
					content: this.content
				}, res => {
					uni.navigateBack({
						delta: 1
					})
				})
			},
			scimg() {
				const that = this
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						// console.log(JSON.stringify(res.tempFilePaths));
						const tempFilePaths = res.tempFilePaths
						if (that.pics) {
							tempFilePaths.forEach(item => {
								that.pics.push(item)
							})
						} else {
							that.pics = tempFilePaths
						}
					}
				});
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f5;
	}

	.title {
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 30rpx;

		>image {
			width: 12rpx;
			height: 24rpx;
			margin-left: 30rpx;
		}
	}

	.toptit {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 600;
		color: #000000;
		line-height: 20rpx;
	}

	.box {
		background-color: #ffffff;
		margin-top: 20rpx;
		padding-bottom: 70rpx;
	}

	.box-1 {
		width: 672rpx;
		margin: 0 auto;
		padding-top: 40rpx;
		display: flex;
		border-bottom: 2rpx solid #e7e7e7;

		>textarea {
			margin-left: 50rpx;
			width: 500rpx;
			height: 150rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #999999;
			line-height: 24rpx;
		}
	}

	.box-1text {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FF0000;
		line-height: 24rpx;

		>text {
			color: #333333;
		}
	}

	.box-1img {
		display: flex;
		margin-left: 50rpx;

		>image {
			margin-right: 20rpx;
			width: 96rpx;
			height: 91rpx;
		}
	}

	.botton {
		position: fixed;
		bottom: 10%;
		left: 125rpx;
		width: 500rpx;
		height: 70rpx;
		background-color: #2e79fc;
		border-radius: 35rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		text-align: center;
		color: #FFFFFF;
		line-height: 70rpx;
	}
</style>
